import { Graph } from '@antv/x6'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
import { MiniMap } from '@antv/x6-plugin-minimap'
import { Transform } from '@antv/x6-plugin-transform'
import { EType } from './config.js'

import './register.js'

export const createGraph = (containerId, edit = false) => {
  const container = document.getElementById(containerId)
  const BGC_COLOR = '#fff'

  const graph = new Graph({
    container,
    autoResize: true,
    panning: {
      enabled: true,
      eventTypes: 'rightMouseDown'
    },
    background: {
      color: BGC_COLOR
    },
    attrs: {
      body: {
        cursor: 'pointer'
      }
    },
    // 只渲染可视区域
    virtual: false,
    // 是否可拖动节点
    interacting: {
      nodeMovable: edit,
      edgeMovable: edit,
    },
    scaling: { min: 0.1, max: 16 },
    grid: {
      visible: edit, 
      type: 'doubleMesh',
      size: 1,
      args: [
        {
          color: '#eee', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 1 // 主次网格线间隔
        },
        {
          color: '#eee', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 1 // 主次网格线间隔
        }
      ]
    },

    connecting: {
      snap: {
        radius: 5,
      },
      allowLoop: false, // 是否允许创建循环连线
      allowNode: false,
      allowBlank: true,
      
      createEdge() {
        return graph.createEdge({
          zIndex: 0,
          attrs: {
            line: {
              stroke: '#31dca0',
              strokeWidth: 2,
              // targetMarker: {
              // name: 'classic', // 设置箭头样式
              //   name: 'null', // 设置箭头样式
              //   size:8,
              // },
              targetMarker: null,
              connection: false,
              fill: '#31dca0'
            }
          },
        })
      },
      createNode() {
        return graph.createNode({
          shape: 'rect'
        })
      }
    },
    // panning: {
    //   enabled: true,
    //   eventTypes: "rightMouseDown",
    // },
    mousewheel: {
      enabled: true,
      modifiers: 'Ctrl'
    },
    view: {
      virtual: true,
      magnetThreshold: 4
    }
  })

  // 移动画布
  graph.use(
    new Snapline({
      enabled: true
    })
  )


  if (edit) {
    graph
      .use(
        new Transform({
          resizing: {
            enabled(node) {
              if (node.data?.type === EType.Entrance.alias) return false
              else if (node.data?.type === EType.Document.alias) return false
              else if (node.data?.type === EType.RoundEdge.alias) return false
              else if (node.data?.type === EType.SmoothEdge.alias) return false
              // 小于3个才能调整大小
              else if (node.markup.length > 3) return false
              // else if(node.data.type === EType.Car.alias) return false
              // else if(node.data.type === EType.Export.alias) return false
              return true
            },
          },
          rotating: true,
        }),
      )
      .use(
        new Keyboard({
          enabled: true
        })
      )
      .use(
        new Clipboard({
          enabled: true
        })
      )
      .use(
        new History({
          enabled: true
        })
      )
      .use(
        new Selection({
          enabled: true,
          rubberband: true,
          modifiers: 'shift',
          showNodeSelectionBox: true,
          showEdgeSelectionBox: true,
          multiple: true,
          // multipleSelectionModifiers: ["shift", "meta"],
        })
      )

  }
  if (!edit) {
    // 隐藏连线端口
    const edges = graph.getEdges()
    edges.forEach((edge) => {
      edge.setInteractable(false)
    })
    graph.use(
      new MiniMap({
        container: document.getElementById('minimap')
      })
    )
  }

  return graph
}

// 获取画布的视图位置和大小
export const getGraphScale = (graph) => {
  const { sx, sy } = graph.scale();
  const { tx, ty } = graph.translate();
  return { scaleX: sx, scaleY: sy, translateX: tx, translateY: ty };
};

// 恢复画布的视图位置和大小
export const setGraphScale = (graph, state) => {
  graph.scale(state.scaleX, state.scaleY);
  graph.translate(state.translateX, state.translateY);
};


